//供应商管理
<template>
  <a-layout>
    <a-layout-content style="padding: 5px">
      <!-- 供应商管理表单 -->
      <a-card title="供应商管理" bordered="{false}">
        <a-form layout="inline">
          <!-- 供应商名称 -->
          <a-form-item label="供应商名称">
            <a-input v-model:value="supplierForm.supplierName" placeholder="请输入供应商名称" />
          </a-form-item>

          <!-- 联系人 -->
          <a-form-item label="联系人">
            <a-input v-model:value="supplierForm.supplierContacts" placeholder="请输入联系人姓名" />
          </a-form-item>

          <!-- 联系方式 -->
          <a-form-item label="联系方式">
            <a-input v-model:value="supplierForm.supplierContact" placeholder="请输入联系方式" />
          </a-form-item>

          <!-- 供应商类型 -->
          <a-form-item label="供应商类型">
            <a-select v-model:value="supplierForm.supplierType" placeholder="请选择供应商类型" style="width: 150px">
              <a-select-option value="生产商">生产商</a-select-option>
              <a-select-option value="服务商">服务商</a-select-option>
              <a-select-option value="经销商">经销商</a-select-option>
            </a-select>
          </a-form-item>

          <!-- 产品及服务 -->
          <a-form-item label="产品及服务">
            <a-input v-model:value="supplierForm.supplierProduct" placeholder="请输入产品及服务信息" />
          </a-form-item>

          <!-- 操作按钮 -->
          <a-form-item>
            <a-button type="primary" @click="addSupplier">新增供应商</a-button>
            <a-button type="default" @click="resetForm" style="margin-left: 8px">重置</a-button>
          </a-form-item>
        </a-form>
      </a-card>

      <!-- 供应商列表展示 -->
      <a-card title="供应商列表" bordered="{false}" style="margin-top: 10px">
        <a-table
          :columns="columns"
          :dataSource="suppliers"
          rowKey="id"
          bordered
          @change="handleChange"
          class="carbon-assets-table"
          :pagination="pagination"
        >
          <template #action="{ record }">
            <a type="link" @click="editSupplier(record)">编辑</a>
            <a-divider type="vertical" />
            <a type="link" danger @click="deleteSupplier(record)">删除</a>
          </template>
        </a-table>
      </a-card>
    </a-layout-content>

    <!-- 编辑供应商弹出框 -->
    <a-modal v-model:visible="isEditModalVisible" title="编辑供应商" @ok="saveEditSupplier" @cancel="cancelEdit">
      <a-form layout="vertical">
        <a-form-item label="供应商名称">
          <a-input v-model:value="editForm.supplierName" />
        </a-form-item>
        <a-form-item label="联系人">
          <a-input v-model:value="editForm.supplierContacts" />
        </a-form-item>
        <a-form-item label="联系方式">
          <a-input v-model:value="editForm.supplierContact" />
        </a-form-item>
        <a-form-item label="供应商类型">
          <a-select v-model:value="editForm.supplierType" style="width: 150px">
            <a-select-option value="生产商">生产商</a-select-option>
            <a-select-option value="服务商">服务商</a-select-option>
            <a-select-option value="经销商">经销商</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="产品及服务">
          <a-input v-model:value="editForm.supplierProduct" />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-layout>
</template>

<script setup>
  import { message } from 'ant-design-vue';
  import { h, reactive, computed, ref, onMounted } from 'vue';
  import { supplierManagement } from '/@/api/Carbon module/Carbon footprint module/supplierManagement';
  import { smartSentry } from '/@/lib/smart-sentry';

  // 供应商数据
  const suppliers = ref([]);

  // 表单数据
  const supplierForm = ref({
    supplierName: '',
    supplierContacts: '',
    supplierContact: '',
    supplierType: '',
    supplierProduct: '',
  });

  // 编辑表单数据
  const editForm = ref({
    supplierId: null,
    supplierName: '',
    supplierContacts: '',
    supplierContact: '',
    supplierType: '',
    supplierProduct: '',
  });

  // 编辑弹窗的显示状态
  const isEditModalVisible = ref(false);

  // 表格列配置
  const columns = [
    { title: '供应商名称', dataIndex: 'supplierName', key: 'supplierName' },
    { title: '联系人', dataIndex: 'supplierContacts', key: 'supplierContacts' },
    { title: '联系方式', dataIndex: 'supplierContact', key: 'supplierContact' },
    { title: '供应商类型', dataIndex: 'supplierType', key: 'supplierType' },
    { title: '产品及服务', dataIndex: 'supplierProduct', key: 'supplierProduct' },
    { title: '操作', key: 'action', slots: { customRender: 'action' } },
  ];

  // 新增供应商
  const addSupplier = async () => {
    if (
      !supplierForm.value.supplierName ||
      !supplierForm.value.supplierContacts ||
      !supplierForm.value.supplierContact ||
      !supplierForm.value.supplierType ||
      !supplierForm.value.supplierProduct
    ) {
      return alert('请完整填写供应商信息');
    }

    const newSupplier = {
      ...supplierForm.value,
    };

    try {
      await supplierManagement.Add(newSupplier);
      queryData();
      resetForm();
    } catch (error) {
      console.log(error);
    }
  };

  // 重置表单
  const resetForm = () => {
    supplierForm.value = {
      supplierName: '',
      supplierContacts: '',
      supplierContact: '',
      supplierType: '',
      supplierProduct: '',
    };
  };

  // 编辑供应商
  const editSupplier = (record) => {
    editForm.value = { ...record };
    isEditModalVisible.value = true;
  };

  // 保存编辑
  const saveEditSupplier = async () => {
    if (
      !editForm.value.supplierName ||
      !editForm.value.supplierContacts ||
      !editForm.value.supplierContact ||
      !editForm.value.supplierType ||
      !editForm.value.supplierProduct
    ) {
      return alert('请完整填写供应商信息');
    }

    const editSupplier = {
      ...editForm.value,
    };

    try {
      await supplierManagement.Update(editSupplier);
      queryData();
      resetForm();
    } catch (error) {
      console.log(error);
    }
    isEditModalVisible.value = false;
  };

  // 取消编辑
  const cancelEdit = () => {
    isEditModalVisible.value = false;
  };

  // 删除供应商
  const deleteSupplier = async (record) => {
    try {
      await supplierManagement.Delete(record.supplierId);
      queryData();
      resetForm();
    } catch (error) {
      console.log(error);
    }
  };

  // 查询供应商列表
  const pagination = computed(() => ({
    total: total.value,
    pageSize: queryFormState.pageSize,
    current: queryFormState.pageNum,
    showTotal: (total) => `总共${total}项`,
  }));
  const queryFormState = reactive({
    pageNum: 1,
    pageSize: 10,
  });
  const tableLoading = ref(false);
  const total = ref(0); //总数
  const queryForm = reactive({ ...queryFormState });
  async function queryData() {
    tableLoading.value = true;
    try {
      queryForm.pageNum = queryFormState.pageNum; // 确保页码同步
      queryForm.pageSize = queryFormState.pageSize;
      let queryResult = await supplierManagement.query(queryForm);
      suppliers.value = queryResult.data.list;
      total.value = queryResult.data.total;
    } catch (e) {
      smartSentry.captureError(e);
    } finally {
      tableLoading.value = false;
    }
  }
  const handleChange = (pagination, filters, sorter) => {
    queryFormState.pageNum = pagination.current; // 更新当前页
    queryFormState.pageSize = pagination.pageSize; // 更新页大小
    queryData();
  };

  onMounted(() => {
    queryData();
  });
</script>

<style scoped>
  a-layout {
    background: #f0f2f5;
  }

  a-card {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  a-button {
    margin-top: 16px;
  }
</style>
